var React = require("react");
var MessageBoard = require("./components/MessageBoard");
/*
React.render(<MessageBoard/>,document.getElementById("message-board-container"));
*/

/** @jsx React.DOM */
var Routes = ReactRouter.Routes;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;

var App = React.createClass({
    render: function(){
        return (
            <div className="main">
                <div>
                    <Link to="bookList">图书</Link>
                    <Link to="movieList">电影</Link>
                </div>
                <div className="content">
                    <this.props.activeRouteHandler/>
                </div>
            </div>
        );
    }
});

var Books = React.createClass({
    render: function(){
        return (
            <ul>
                <li>老人与海</li>
                <li>黄金时代</li>
                <li>平凡的世界</li>
            </ul>
        );
    }
});

var Moives = React.createClass({
    render: function(){
        return (
            <ul>
                <li>独自等待</li>
                <li>大话西游</li>
                <li>楚门的世界</li>
            </ul>
        );
    }
});

var routes = (
    <Routes location="hash">
        <Route path="/" handler={App}>
            <Route path="books" name="bookList" handler={Books}/>
            <Route path="movies" name="movieList" handler={Moives}/>
        </Route>
    </Routes>
);

React.renderComponent(routes,  document.body);